import React, { FC } from 'react';
import { Form, Input, Button, Checkbox } from 'antd';
import { connect, Dispatch } from 'umi';
import { ConnectState } from '@/models/connect';
import 'antd/dist/antd.css';
import styles from '../common.less';
import { creator } from '@/utils/creator';

export interface LoginProps {
  dispatch: Dispatch;
  login: ConnectState;
  loading: boolean;
}

const Login: FC<LoginProps> = ({ dispatch }) => {
  const onFinish = (values: any) => {
    dispatch(creator('user/login', values));
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div className={styles.center}>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        //   initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          name="username"
          rules={[{ required: true, message: '不可为空!' }]}
        >
          <Input placeholder="用户名" />
        </Form.Item>

        <Form.Item
          name="password"
          rules={[{ required: true, message: '不可为空!' }]}
        >
          <Input.Password placeholder="密码" />
        </Form.Item>
        <Button style={{ width: 136 }} type="primary" htmlType="submit">
          Login
        </Button>
      </Form>
    </div>
  );
};

export default connect(({ user }: { user: ConnectState }) => ({ user }))(Login);
